<!DOCTYPE html>
<html>
<head>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    .warper{
        width: 100%;
        margin: 50px auto;
    }
    .mian{
        background-color: aqua;
        float: left;
        height: 300px;
        width: 33.333333%;
    }
    @media (max-width: 600px) {
        .warper{
            width: 100%;
        }
        .mian{
            background-color: yellow;
            width: 100%;
        }
    }
</style>
    <meta charset="UTF-8">
    <title>wojiushiwo</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="warper">
    <div class="mian">左边</div>
    <div class="mian">中间</div>
    <div class="mian">右边</div>
</div>
</body>
</html>